<template>
    <script :id="randomId" name="content" type="text/plain"></script>
</template>

<script>
    //参考网址：https://github.com/SilentTiger/vue-ueditor
    /**
     * 使用方法
     * <ueditor :mycontent.sync="news_cur_data.content"></ueditor>
     */
    export default {
        name: 'Ueditor',
        props: {
            ueditorPath: {
                // UEditor 代码的路径
                type: String,
                default: '/vendor/neditor/'
            },
            ueditorConfig: {
                // UEditor 配置项
                type: Object,
                default: function () {
                    return {
                        serverUrl:'/Admin/SysFile/ueditorUpload',
                        autoHeightEnabled:false,
                        initialFrameHeight: 600,
                    };
                }
            },
            mycontent:{
                type: String,
                default:'',
            },
        },
        data () {
            return {
                // 为了避免麻烦，每个编辑器实例都用不同的 id
                randomId: 'editor_' + (Math.random() * 100000000000000000),
                instance: null,
                // scriptTagStatus -> 0:代码未加载，1:两个代码依赖加载了一个，2:两个代码依赖都已经加载完成
                scriptTagStatus: 0,
                newContent: _.cloneDeep(this.content),
            };
        },
        created () {
            this.initEditor();
        },
        beforeDestroy () {
            // 组件销毁的时候，要销毁 UEditor 实例
            if (this.instance !== null && this.instance.destroy) {
                this.instance.destroy();
            }
        },
        methods: {
            initEditor () {
                // scriptTagStatus 为 2 的时候，说明两个必需引入的 js 文件都已经被引入，且加载完成
                if (this.instance === null) {
                    // Vue 异步执行 DOM 更新，这样一来代码执行到这里的时候可能 template 里面的 script 标签还没真正创建
                    // 所以，我们只能在 nextTick 里面初始化 UEditor
                    this.$nextTick(() => {
                        this.instance = window.UE.getEditor(this.randomId, this.ueditorConfig);
                        let token = document.head.querySelector('meta[name="csrf-token"]');
                        this.instance.ready(() => {
                            this.instance.setContent(this.mycontent);
                            this.instance.execCommand('serverparam', '_token', token.content);
                        });
                        // 绑定事件，当 UEditor 初始化完成后，将编辑器实例通过自定义的 ready 事件交出去
                        this.instance.addListener('ready', () => {
                            this.$emit('ready', this.instance);
                        });
                        //监控编辑器内容
                        this.instance.addListener('contentChange', () => {
                            this.newContent = this.instance.getContent();
                            this.$emit('update:mycontent', this.newContent);
                        });
                    });
                }
            },
            setMyContent(content) {//设置编辑器内容
                this.newContent = content;
                if (this.instance !== null) {
                    this.instance.setContent(content);
                }
            },
        }
    };
</script>